<div class="progressbar-container">
  <ng-progress #labProgress="ngProgressRef"
               ngProgressHttp
               [flat]="options.flat"
               [min]="options.min"
               [max]="options.max"
               [speed]="options.speed"
               [spinner]="options.spinner"
               [spinnerPosition]="options.spinnerPosition"
               [direction]="options.direction"
               [trickleSpeed]="options.trickleSpeed"
               [fadeOutSpeed]="options.fadeOutSpeed"
               [debounceTime]="options.debounceTime"
               [relative]="options.relative"
               (started)="onProgressStarted()"
               (completed)="onProgressCompleted()"/>
</div>

<div class="grid">
  <table>
    <tr>
      <td>
        <button (click)="labProgress.start()">
          <img src="../../assets/play.svg"/>
        </button>
      </td>
      <td>NgProgress.
        <strong>start()</strong> —
        <i>shows the progress bar</i>
      </td>
    </tr>
    <tr>
      <td>
        <button (click)="labProgress.set(40)">
          <img src="../../assets/play.svg"/>
        </button>
      </td>
      <td>NgProgress.
        <strong>set(40)</strong> —
        <i>sets a percentage 40%</i>
      </td>
    </tr>
    <tr>
      <td>
        <button (click)="labProgress.inc(20)">
          <img src="../../assets/play.svg"/>
        </button>
      </td>
      <td>NgProgress.
        <strong>inc(20)</strong> —
        <i>increments by a percentage 20%</i>
      </td>
    </tr>
    <tr>
      <td>
        <button (click)="labProgress.complete()">
          <img src="../../assets/play.svg"/>
        </button>
      </td>
      <td>NgProgress.
        <strong>complete()</strong> —
        <i>completes the progress</i>
      </td>
    </tr>
  </table>
  <div class="events">
    <span class="chip" [class.changed]="startedClass()"> NgProgress.
      <strong>started</strong>
    </span>
    <span class="chip" [class.changed]="endedClass()"> NgProgress.
      <strong>completed</strong>
    </span>

    <button class="chip" (click)="testHttp()" [disabled]="preventAbuse()">
      {{ preventAbuse() ? 'Wait...' : 'Test Http Request' }}
    </button>
  </div>
</div>

<app-lab [(options)]="options"/>
